<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .main_center {
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .a > a {
            text-decoration: none;
            color: black;
        }

        a:hover {
            color: #ff5c68
        }

        .table_img {
            font-size: 10px;
            color: black;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头-->
        <my-header></my-header>
        <!--身体-->
        <el-main class="main_center">
            <div style="width: 1300px;margin: 0 auto">
            <span class="a" style="margin-right: 1000px;">
                <a href="index.html">首页</a> >
                <a href="user_info.html">我的大麦</a> >
                <a href="">订单管理</a> >
                <span style="color: #999999">订单编号：</span>
                <hr style="color: #cccccc">
            </span>
                <p style="font-size: 14px;margin-bottom: 25px">订单号:</p>
                <span style="font-size: 32px;">交易关闭</span>
                <span style="font-size: 15px;margin-left: 20px;">支付超时：已关闭交易</span>
                <span style="font-size: 15px;margin-left: 830px;">需付款：</span>
                <span style="font-size: 32px;">$410</span>

                <div>
                    <template >
                        <el-table :data="tableData" style="background-color: #e8e8e8">
                            <el-table-column label="项目详情" width="420px" hight="350px">
                                <div >
                                    <a href="buysuccess.html" class="table_img" style=" text-decoration: none;">
                                        <img style="position: relative;bottom: 5px; float: left" src="imgs/新加坡蔡徐坤.jpg" width="120px" height="140px">
                                        <h3  style="position: relative;left:30px;color: black;bottom: 10px;">【新加坡站】蔡徐坤KUN 2023「迷」<br>WORLD TOUR IN SINGAPORE</h3>
                                    </a>
                                    <p style="font-size: 10px;color: #4a4a4a; position: relative;left: 30px;bottom:30px;font-size: 10px">时间：2023.07.15 周六 20:00</p>
                                    <p style="font-size: 10px;color: #4a4a4a;position: relative;left: 30px;bottom:30px;font-size: 10px">地点：新加坡金沙会议展览中心第五层<br>金沙大宴会厅</p>
                                </div>
                            </el-table-column>
                            <el-table-column prop="seat" label="座位信息" width="180"></el-table-column>
                            <el-table-column prop="price" label="单价"></el-table-column>
                            <el-table-column prop="num" label="数量"></el-table-column>
                            <el-table-column prop="favourable" label="优惠"></el-table-column>
                            <el-table-column prop="subtotal" label="小计"></el-table-column>
                        </el-table>
                    </template>
                </div>

            </div>
        </el-main>

        <!--脚-->
        <el-footer>

        </el-footer>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入外部js文件-->
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [{
                    "imgUrl": "imgs/五月天.jpg",
                    seat: '暂无座位信息',
                    price: '￥398.00',
                    num: '1',
                    favourable: '-',
                    subtotal: '￥398.00',
                }]
            }
        },
        methods: {}
    })
</script>
</html>